<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的购物车 - 江宁义务网上商城 - 网购首选 - 正品低价、品质保障、货到付款、配送及时、放心服务、轻松购物！</title>
<meta name="description" content="义务商城-专业的综合网上购物商城，在线销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品、在线旅游等数万个品牌千万种优质商品。便捷、诚信的服务，为您提供愉悦的网上商城购物体验! ">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东商城">
<jsp:include page="../common/include.jsp"></jsp:include>
<!-- mobile setting -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="<c:url value="/scripts/jquery-1.7.2.min.js"/>"></script>
<style type="text/css"> 
       table.cart-tb{border-collapse:collapse;border:none;border:solid rgb(204, 204, 204) 1px;}
       table.cart-tb th,table.cart-tb td{border:solid rgb(204, 204, 204);border-width:0 0 1px 0;}
       table.cart-tb th{height: 35px;background-color:  rgb(245, 245, 245);line-height: 35px;text-align: center;}
       table.cart-tb td{height: 60px;line-height: 50px;text-align: center;padding: 8px 0;}
       table.cart-tb .las{border-right-width:1px;}
       table.cart-tb td.pname{text-align: left;}
       div.pimg{width: 55px;height:55px;padding: 1px;border: 1px solid #ccc;float: left;margin: 0 10px;}
       div.pimg img{display: block;width: 55px;height:55px;}
   	   table.cart-tb td.allp{font-size: 16px;font-weight: bold;text-align: right;padding: 0 20px;height: 50px;line-height: 50px;}
table.cart-tb td a{text-decoration: none;color:#544f4b;}
table.cart-tb td a:HOVER{text-decoration: underline;color:#EF5A1F;}
.cart-button{padding: 20px 10px;}
.cart-button a{height: 35px;width:120px;line-height:35px; border:1px solid rgb(204, 204, 204);display: block;background-color: rgb(245, 245, 245);text-decoration: none;color: #544F4B;text-align: center;font-size: 16px;font-weight: bold;}
.cart-button a.continue{float: left;font-size: 14px;}
.cart-button a.checkout{float: right;color:#fff;background-color: #EF5A1F;border-color: #fff;}
.cart-button a:HOVER {color:#fff;background-color: #f38256;border-color: #fff;}
.cart_box_{padding: 5px;background: #ccc;margin-bottom: 50px;}
.cart_box{background: #fff;width:970px;padding-bottom: 20px;}

.h_progress .p_one_t{background-color:#f38256; }
.h_progress .p_one_n{color:#f38256;}
td.qualify a{
text-decoration: none;width: 10px;height: 10px;border: 1px solid #dedede;line-height: 24px;;
}
td.qualify input{
text-align: center;width: 30px;margin: 0 5px;
}

div.addr_tab{    position:absolute; background:white; z-index:10001; width: 400px;border:5px solid #dedede;padding: 10px 0 10px 80px;display:none}
div.addr_tab table tr td{height: 25px;line-height: 25px; border-width:0; padding:3px 0;font-size: 14px;}
div.addr_tab table tr td input[type="text"]{width: 250px;height: 30px;line-height: 30px;padding-left: 10px;border: 1px solid #ccc;}
div.addr_tab table tr td input[type="password"]{width: 250px;height: 30px;line-height: 30px;padding-left: 10px;border: 1px solid #ccc;}
div.addr_tab table tr td input[type="submit"]{color:#fff; font-size:14px; font-weight:bold; padding:8px 0;width: 262px; background:#EF5A1F; border:0px; line-height:100%; cursor:pointer;height: 35px;}
div.addr_tab table tr td input[type="submit"]:HOVER {background-color: #f38256;}
div.closeDivClass{    cursor:pointer;float:right;margin-right:12px;
    width:22px;height:22px;background-position:-97px -195px;background-image: url("<c:url value='/images/icon.png '/>");
}
.bgDiv{display:none;  position:absolute;  top:0;  background-color:#777;  filter:Alpha(opacity=30);  opacity:0.6;
   left:0;  width:100%;  height:100%;  z-index:10000;}
.second{display:none;border:#e5c3c4 1px solid;    padding:0 5px 0 5px;line-height:30px;background:#ffeaea;white-space:nowrap;
    height:30px; border-radius:3px;font-size:12px;}
.red{color:#c00;}

</style> 
<script>
//使弹出的操作层居中显示
function letDivCenter(divName){   
    var top = ($(window).height() - $(divName).height())/2;   
    var left = ($(window).width() - $(divName).width())/2;   
    var scrollTop = $(document).scrollTop();   
    var scrollLeft = $(document).scrollLeft(); 
    var screenWidth = document.body.offsetWidth;
    var screenHeight = document.body.offsetHeight;
    $("#bgDiv").css({display:'block','width':screenWidth,'height':screenHeight});
    $(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();  
}

	//隐藏弹出的div层
function hideTheDiv(flag){
	if(flag == 0){
		$(".addr_tab").css("display","none");
	}else if(flag == 1){
	}
	$("#bgDiv").css("display","none");
}

function showAddDiv(){
	letDivCenter(".addr_tab");
}

//全选按钮实现
function changeTheSel(obj,sumprice){
	if(obj.checked == true){
		$("input[name='selProFk']").attr("checked","checked");
		recalculate();
	}else{
		$("input[name='selProFk']").attr("checked","");
		recalculate();
	}
}

//删除购物车中的某个
function delShopCartPro(obj,pcode){
	if(confirm("确定删除该商品？")){
	    $.ajax({
	 		url : "delShopCartPro",
	 		type : "post",
	 		data:"pcode="+pcode,
	 		dataType:"json",
	 		success : function(data) {
	 			var bool = data.message;
	 			if(bool=="true"){
	 				$(obj).parent().parent().remove();
	 				recalculate();
	 				return 1;
	 			}else{
	 				alert("购物车中商品删除失败，请重试");
	 				return 0;
	 			}
	 		}
	 	});
	}else{
		return -1;
	}
}

//修改cookie信息或者数据库记录信息
function modifyCookieHelp(pnum,pcode,jf,obj){
    $.ajax({
 		url : "modifyShopCartPro",
 		type : "post",
 		data:"pcode="+pcode+"&pnum="+pnum,
 		dataType:"json",
 		success : function(data) {
 			var bool = data.message;
 			if(bool=="true"){
 				$(obj).parent().parent().find("td:eq(3)").text(pnum*jf);
 				recalculate();
 			}else{
 				alert("修改信息失败，请重试");
 			}
 		}
 	});
}

//重新计算选中商品的总价格
function recalculate(){
	var sumprice = 0;
	$("tr[class='recordOfShopcart']").each(function(){
		if($(this).find("td:first input").attr("checked")==true){
			var price = parseFloat(jQuery.trim($(this).find("td:eq(2)").text()));
			var pnum = parseInt(jQuery.trim($(this).find("td:eq(4) input[type='text']").attr("value")));
			sumprice += price * pnum;
		}
	});
	$("#sumpricetxt").text(" ￥"+sumprice+" ");
}

//商品的选择按钮改变时触发的函数
function changeScSel(){
	recalculate();
}

//增加或者减少商品
function addNum(obj,val,pcode,jf){
	var numOfpro = parseInt($(obj).parent().find("input[type='text']").val());
	if(val == -1 && numOfpro == 1){
		alert("至少购买一件商品");
	}else if(numOfpro > 999 && val == 1){
		alert("购买数量应该在1-999之间");
	}else{
		var result = val + numOfpro;
		$(obj).parent().find("input[type='text']").attr("value",result);
	}
	modifyCookieHelp($(obj).parent().find("input[type='text']").val(),pcode,jf,obj);
}

//数量修改后修改cookie或者数据库中的值
function modifyCookie(obj,pcode,jf){
	var pnum = obj.value;
	var regu = "^[1-9][0-9]{0,2}$";
	var re = new RegExp(regu);
	if(pnum == 0){
		var result = delShopCartPro(obj,pcode);
		if(result == -1){
			obj.value = "1";
		}
	}else if(!re.test(pnum)){
		alert("商品数量应该在1-999之间");
		obj.value= "1";
	}
	modifyCookieHelp(obj.value,pcode,jf,obj);
}

//删除选择的商品
function delSelScs(){
	if(confirm("删除所有选中的商品？")){
		var pcodes = "";
		$("tr[class='recordOfShopcart']").each(function(){
			if($(this).find("td:first input").attr("checked")==true){
				pcodes += $(this).find("td:first input").attr("id")+"@";
			}
		});
		pcodes = pcodes.substring(0,pcodes.length-1);
	    $.ajax({
	 		url : "delShopCartPros",
	 		type : "post",
	 		data:"pcodes="+pcodes,
	 		dataType:"json",
	 		success : function(data) {
	 			var bool = data.message;
	 			if(bool=="true"){
	 				window.location.reload();
	 			}else{
	 				alert("删除购物车中商品失败，请重试");
	 			}
	 		}
	 	});
	}
}

//点击去付款
function goToFk(userflag){
    if(userflag == 0){
    	showAddDiv();
	}else{ 
		var sumprice = 0;
		var pcodes = "";
		$("tr[class='recordOfShopcart']").each(function(){
			if($(this).find("td:first input").attr("checked")==true){
				var price = parseFloat(jQuery.trim($(this).find("td:eq(2)").text()));
				var pnum = parseInt(jQuery.trim($(this).find("td:eq(4) input[type='text']").attr("value")));
				sumprice += price * pnum;
				pcodes += $(this).find("td:first input").attr("id")+"@";
			}
		});
		if(pcodes == ""){
			alert("亲，请选择商品后，再支付。");
			return;
		}
		pcodes = pcodes.substring(0,pcodes.length-1);
		$("#pcodes").attr("value",pcodes);
		$("#sumprice").attr("value",sumprice);
		document.myform.submit();
	}
}

function mession(obj){
	//$(obj).addClass("inputTxtClass-focus");
	$(obj).parent().parent().find("div.first").css("display","block");
	$(obj).parent().parent().find("div.second").css("display","none");
	$(obj).parent().parent().find("div.thread").css("display","none");
}

function validVal(obj){
	//$(obj).removeClass("inputTxtClass-focus");
	$(obj).parent().parent().find("div.first").css("display","none");
	var val = jQuery.trim($(obj).val());
	if($(obj).attr("name")=="username"){
    	var regu = "^[0-9a-zA-Z\\_]{2,20}$";
    	var regu1 = "^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$";
    	var regu2 = "^[0-9]{11}$";
    	var re = new RegExp(regu);
    	var re1 = new RegExp(regu1);
    	var re2 = new RegExp(regu2);
    	if(val == ""){
    		//$(obj).addClass("inputTxtClass-error");
    		$(obj).parent().parent().find("div[class='second'] span").text("请输入用户名");
            $(obj).parent().parent().find("div[class='second']").css("display","block");
            return false;
    	}
    	if(re.test(val) || re1.test(val) || re2.test(val)){
    		return true;
    	}else{
    		//$(obj).addClass("inputTxtClass-error");
    		$(obj).parent().parent().find("div[class='second'] span").text("用户名格式错误");
            $(obj).parent().parent().find("div[class='second']").css("display","block");
            return false;
    	}
	}else{
            var regu = "^[0-9a-zA-Z]{6,16}$";
            var re = new RegExp(regu);
            if(val == ""){
        		$(obj).parent().parent().find("div[class='second'] span").text("请输入密码");
                $(obj).parent().parent().find("div[class='second']").css("display","block");
                return false;
            }
            if(re.test(val)){
            	return true;
            }else{
        		$(obj).parent().parent().find("div[class='second'] span").text("密码格式错误");
                $(obj).parent().parent().find("div[class='second']").css("display","block");
                return false;
            }
	}
}

//登录
function login(){
	var obj1 = $("input[name='username']")[0];
	var obj2 = $("input[name='pwd']")[0];
	var bool1 = validVal(obj1);
	var bool2 = validVal(obj2);
	var username = jQuery.trim($("input[name='username']").val());
	var password = jQuery.trim($("input[name='pwd']").val());
	if(bool1 && bool2){
        $.ajax({
     		url : "<c:url value='/crtc/loginToSys'/>",
     		type : "post",
     		data:"username="+username+"&pwd="+password,
     		dataType:"json",
     		success : function(data) {
     			var bool = data.message;
     			if(bool=="ok"){
     				window.location.reload(true);
     			}else if(bool=="no"){
     				alert("用户名或密码错误，请重试");
     			}else{
     				alert("数据库持久化错误，请检查网络");
     			}
     		}
     	});
	}
}
</script>
</head>

<body>
<div class="wrapper">
    <div class="header_container">
        <!--Header Starts-->
        <header><div class="header">
            <div class="top_bar clear">
                <!--Language Switcher Starts-->
               <div class="language_switch"> Hi. 蜗牛2. [<a href="<c:url value="/wlc"/> ">首页</a>]</div>
				<div class="language_switch head-right"> 您好,&nbsp;
					<c:if test="${user != null }">${uname} &nbsp; [<a href="<c:url value="/urc/center"/>">用户中心</a>]&nbsp;|&nbsp;[<a href="<c:url value="/urc/lgnout"/>">退出</a>]</c:if>
					<c:if test="${user == null }"> 欢迎蜗牛商城 ! &nbsp;[<a href="<c:url value="/urc/lgnpage"/>">登录</a>]&nbsp; [<a href="<c:url value="/urc/regpage"/>">免费注册</a>]
					</c:if>
					 &nbsp;|&nbsp; <a class="nav" href="<c:url value="/ordc/myorder"/>">我的订单</a>&nbsp;|&nbsp; <a class="nav" href="#">客户服务</a></div>
                <!--Top Links Ends-->
            </div>
            <!--Logo Starts-->
            <h1 class="logo"> <a href="<c:url value="/wlc"/>"><img src="<c:url value="/images/logo.png"/> " /></a></h1>
            <!--Logo Ends-->
            <!--Search Starts-->
            	<div class="header_login"> | 我的购物车</div>
            	<div class="h_progress">
            		<table>
            			<tr><th class="p_one_t">①</th><th>② </th><th>③</th></tr>
            			<tr><td class="p_one_n">1.我的购物车</td><td>2.核对订单信息</td><td>3.成功提交订单</td></tr>
            		</table>
            	</div>
            <!--Search Ends-->
        </div></header>
        <!--Header Ends-->
    </div>
    <div class="navigation_container">
        <!--Navigation Starts-->
        <!--Navigation Ends-->
    </div>
    <div class="section_container">
        <!--Mid Section Starts-->
        <section><div class="section">
        	<div class="cart_box_">
        	<div class="cart_box">
        		<table class="cart-tb">
        			<tr>
        				<th width="70px"><input type="checkbox" checked="checked" onchange="changeTheSel(this,${sumprice})">全选</th>
        				<th width="450px">商品名称</th>
        				<th width="100px">单价</th>
        				<th width="100px">积分</th>
        				<th width="150px">数量</th>
        				<th width="100px" class="las">操作</th>
        			</tr>
        			
        			<c:forEach items="${shopcart}" var="p">
								<tr class="recordOfShopcart">
									<td><input type="checkbox" id="${p.pcode}" name="selProFk" value="1" checked="checked" onchange="changeScSel()"></td>
									<td class="pname">
										<div class="pimg">
											<a href="<c:url value="/wlc/gpro?pcode=${p.pcode}"/>" target="_blank"><img
												src="<c:url value="${p.pphoto}"/>"></a>
										</div> <a href="<c:url value="/wlc/gpro?pcode=${p.pcode}"/>" target="_blank">${p.pname}</a>
									</td>
									<td>${fn:split(p.phyprice,"*")[0]} 元</td>
									<td>${p.khjf*fn:split(p.phyprice,"*")[1]}</td>
									<td class="qualify">
									<a href="javascript:void(0);" onclick="addNum(this,-1,${p.pcode},${p.khjf})"> &nbsp;-&nbsp; </a><input type="text" onkeyup="this.value=this.value.replace(/\D/g,'');" onblur="modifyCookie(this,${p.pcode},${p.khjf})" name="pnum" value="${fn:split(p.phyprice,'*')[1]}"><a href="javascript:void(0);" onclick="addNum(this,1,${p.pcode},${p.khjf})">&nbsp;+&nbsp;</a>
									</td>
									<td class="las"><a href="javascript:void(0);" onclick="delShopCartPro(this,${p.pcode})">删除</a></td>
								</tr>
				    </c:forEach>
        			<tr>
						<td colspan="10" class="las allp"><span style="float: left;font-size: 12px;font-weight: normal;">[ <a href="javascript:void(0);" onclick="delSelScs();">删除选中的</a> ] </span>商品总计(不含运费)：<font color="#ef5a1f" id="sumpricetxt"> ￥${sumprice}</font></td>
					</tr>
        		</table>
        		<div class="cart-button"> 
        			<!-- <a href="javascript:history.back();" class="continue"><span>&lt;&lt; 继续购物</span></a> -->
        			<form name="myform" action="<c:url value="/crtc/apply"/>">
        			    <input type="hidden" name="pcodes" id="pcodes"/>
        			    <input type="hidden" name="sumprice" id="sumprice"/>
        			    <a href="javascript:void(0);" onclick="goToFk(${user==null?0:1});" class="checkout"><span>去付款 &gt;&gt;</span></a>
        			</form>
        		</div>
        		<div style="clear: both;" >&nbsp;</div>
        	</div></div>
        	<p>&nbsp;</p>
        </div></section>
        <!--Mid Section Ends-->
        
        <!-- 弹出层 登录 -->
        <div class="addr_tab">
            <div class="closeDivClass" onclick="hideTheDiv(0)"></div>   
   			<table>
   						<tr>
							<td><br>邮箱 / 用户名 / 手机号：</td>
							<td></td>
						</tr>
						<tr>
							<td><input type="text" class="inputTxtClass" value="" name="username" onfocus="mession(this)" onblur="validVal(this)"></td>
							<td>
					  	        <div class="second"><span class="red"></span></div>
							</td>
						</tr>
						<tr>
							<td class="btn_subm_td">登录密码：</td>
							<td></td>
						</tr>
						<tr>
							<td><input type="password"  class="inputTxtClass" value="" name="pwd" onfocus="mession(this)" onblur="validVal(this)"></td>
							<td>
					  	        <div class="second"><span class="red"></span></div>
	                        </td>
						</tr>
						<tr>
							<td class="btn_subm_td"><br><input type="submit" onclick="login();" value="登  录"></td>
							<td></td>
						</tr>
						<tr>
							<td><br>&nbsp;</td>
							<td class="fg_pwd_td"><br><a href="#">忘记密码？</a></td>
						</tr>
	        </table>
        </div>
    </div>
    <div class="footer_container">
        <!--Footer Starts-->
            <address>
            	<ul><li><a href="#">关于我们</a></li>
            		<li><a href="#">联系我们</a></li>
            		<li><a href="#">人才招聘</a></li>
            		<li><a href="#">商家入驻</a></li>
            		<li><a href="#">广告服务</a></li>
            		<li>免责条款 © 2012-2014 ***  版权所有，并保留所有权利。 </li>
   				</ul>
            </address>
        <!--Footer Ends-->
    </div>
</div>
<div id="bgDiv" class="bgDiv"></div>
</body>
</html>